<template>
  <div class="chat-page">
    <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"-->
             <!--background-color="#545c64"-->
             <!--@select="handleSelect">-->
      <!--<el-menu-item index="1">消息</el-menu-item>-->
      <!--<el-menu-item index="2">通讯录</el-menu-item>-->
    <!--</el-menu>-->

    <van-tabs v-model="active">
      <van-tab>
        <div slot="title">
          <van-icon name="more-o" />信息
        </div>
      </van-tab>
      <van-tab>
        <div slot="title">
          <van-icon name="contact" />通讯录
        </div>
      </van-tab>
    </van-tabs>

    <div class="chat-line" v-for="i in 3">
      <el-row>
        <el-col :span="3">
          <div class="head">
            <Avatar shape="square" src="../../../static/images/defaultHeadImage.jpg" size="large"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="title">
            <div class="name">
              赵丽颖
            </div>
            <div class="msg">
              这件衣服怎么卖？
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
        finished: false
      };
    },

    methods: {
      onLoad() {
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          this.loading = false;

          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 500);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/less/index";
</style>
